<!--
 * @Date: 2025-01-08 10:53:38
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-08 11:21:54
 * @Description: 项目一户式面板
-->
<template>
  <div class="proj-yhs-wrapper"
    v-show="!loading">
    <div class="proj-yhs-header"
      v-if="showHeader">
      <div class="header-item header-item-proj">
        <span>项目名称：{{ echoFormData.PRO_NAME }}</span>
      </div>
      <div class="header-item">
        <span>项目单位：{{ echoFormData.AGENCY_NAME }}</span>
      </div>
      <div class="header-item header-item-size">
        <span>单位：万元</span>
      </div>
    </div>
    <div class="proj-yhs-body"
      :class="showHeader ? '' : 'header-hidden'">
      <div class="yhs-body-center">
        <FpRender
          v-if="inofLoaded"
          ref="rkFormRenderRef"
          :="{ ...props, ...$attrs }"
          :preview="true"
          :disabled="true"
          :formData="echoFormData"
          :autoLoad="true"
          @loaded="renderLoaded"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="ProjectPreYhsPanel">
import XEUtils from 'xe-utils';
import { watch } from 'vue'
import { FpRender } from '@fp';
import { ElLoading, ElMessage } from 'element-plus';
import { useProjectInfoApi } from '@/api';

const { getProjectInfo } = useProjectInfoApi();

const props = defineProps({
  proId: { type: String, required: true },
  applyId: { type: String, default: '' },
  formType: { type: String, default: 'yhs' },
  formCode: { type: String, default: '' },
  showHeader: { type: Boolean, default: true },
  openLoaded: { type: Boolean, default: true },
  bondTypeCode: { type: String, default: '' },
  defaultTabActiveName: { type: String },

});

// ----- 加载表单数据信息
// 加载中
const loading = ref(false);
// 项目信息加载完毕
const inofLoaded = ref(false);

// 回显数据
const echoFormData = ref({});
/**
 * 加载表单信息
 * @param {Object} config 参数配置
 */
const loadData = async (config) => {
  // console.log('1 yhsPanel loadData', config, props)
  if (!validateConfig(config)) return;
  echoFormData.value = config;
  loading.value = true;
  openLoad()
  const projectInfo = await getProjectInfo(config, () => {
    inofLoaded.value = true;
  }).catch((err) => {
    ElMessage.error(err);
    closeLoad()
    loading.value = false;
  });
  if (projectInfo) {
    echoFormData.value = { ...echoFormData.value, ...projectInfo };
    // 对单位名称赋值
    echoFormData.value['agName'] = projectInfo['AGENCY_NAME'];
  }
};
/**
 * 校验参数配置
 * @param {Object} config 参数配置
 */
const validateConfig = (config) => {
  if (typeof config === 'object' || config instanceof Object) {
    if (config.hasOwnProperty('proId')) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
};
/**
 * 表单渲染结束
 */
const renderLoaded = () => {
  closeLoad()
  loading.value = false;
};

// 加载中遮罩
const loadStore = ref(null);
const openLoad = () => {
  if (!props.openLoaded) return
  loadStore.value = ElLoading.service({ fullscreen: true, text: '加载中......' });
}
const closeLoad = () => {
  if (!(loadStore && loadStore.value)) return
  loadStore.value.close();
}

watch(
  () => props.proId,
  (nv, ov) => {
    inofLoaded.value = false;
    if (!nv) return
    loadData(XEUtils.clone(props, true));
  },
  { deep: true, immediate: true }
)

</script>

<style lang="scss" scoped>
.proj-yhs-wrapper {
	height: 100vh;
	width: 100%;
	background-color: #fff;
}
.proj-yhs-header {
	display: flex;
	height: 35px;
	padding: 0 15px;
	.header-item {
		display: flex;
		flex: 1;
		height: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
	.header-item-proj {
		justify-content: left;
	}
	.header-item-size {
		justify-content: right;
	}
}
.proj-yhs-body {
	height: calc(100% - 35px);
	flex: 1;
	display: flex;
	flex-direction: column;
	&.header-hidden {
		height: 100%;
	}
	.yhs-body-center {
		height: 100%;
	}
}
</style>